"use client"

import { Checkbox } from "@/components/ui/checkbox"

import { useState } from "react"
import { Moon, Sun, Laptop, Save, Eye, EyeOff, Info, HelpCircle } from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import { Slider } from "@/components/ui/slider"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { useTheme } from "next-themes"

export function SystemSettings() {
  const { theme, setTheme } = useTheme()
  const [showPassword, setShowPassword] = useState(false)

  return (
    <div className="space-y-6">
      <Tabs defaultValue="general">
        <TabsList className="mb-4">
          <TabsTrigger value="general">常规设置</TabsTrigger>
          <TabsTrigger value="account">账户设置</TabsTrigger>
          <TabsTrigger value="notification">通知设置</TabsTrigger>
          <TabsTrigger value="appearance">外观设置</TabsTrigger>
          <TabsTrigger value="about">关于系统</TabsTrigger>
        </TabsList>

        <TabsContent value="general" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>常规设置</CardTitle>
              <CardDescription>管理系统的基本设置和偏好</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="language" className="text-base">
                      语言
                    </Label>
                    <p className="text-sm text-muted-foreground">选择系统显示语言</p>
                  </div>
                  <Select defaultValue="zh-CN">
                    <SelectTrigger id="language" className="w-[180px]">
                      <SelectValue placeholder="选择语言" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="zh-CN">简体中文</SelectItem>
                      <SelectItem value="en-US">English</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <Separator />

                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="timezone" className="text-base">
                      时区
                    </Label>
                    <p className="text-sm text-muted-foreground">设置系统时区</p>
                  </div>
                  <Select defaultValue="Asia/Shanghai">
                    <SelectTrigger id="timezone" className="w-[180px]">
                      <SelectValue placeholder="选择时区" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Asia/Shanghai">北京时间 (GMT+8)</SelectItem>
                      <SelectItem value="America/New_York">纽约时间 (GMT-5)</SelectItem>
                      <SelectItem value="Europe/London">伦敦时间 (GMT+0)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <Separator />

                <div className="flex items-center justify-between">
                  <div>
                    <Label className="text-base">自动登出</Label>
                    <p className="text-sm text-muted-foreground">设置无操作自动登出时间</p>
                  </div>
                  <Select defaultValue="30">
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="选择时间" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="15">15分钟</SelectItem>
                      <SelectItem value="30">30分钟</SelectItem>
                      <SelectItem value="60">1小时</SelectItem>
                      <SelectItem value="never">从不</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <Separator />

                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="auto-refresh" className="text-base">
                      自动刷新
                    </Label>
                    <p className="text-sm text-muted-foreground">启用数据自动刷新</p>
                  </div>
                  <Switch id="auto-refresh" defaultChecked />
                </div>

                <Separator />

                <div className="space-y-2">
                  <Label className="text-base">刷新频率</Label>
                  <p className="text-sm text-muted-foreground">设置数据自动刷新的频率（秒）</p>
                  <div className="pt-2">
                    <Slider defaultValue={[30]} max={60} step={5} />
                    <div className="mt-1 flex justify-between text-xs text-muted-foreground">
                      <span>5秒</span>
                      <span>30秒</span>
                      <span>60秒</span>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button className="gap-1">
                <Save className="h-4 w-4" />
                保存设置
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>

        <TabsContent value="account" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>账户设置</CardTitle>
              <CardDescription>管理您的账户信息和安全设置</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="name">姓名</Label>
                  <Input id="name" defaultValue="王老师" />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="email">电子邮箱</Label>
                  <Input id="email" type="email" defaultValue="teacher@school.edu.cn" />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="phone">手机号码</Label>
                  <Input id="phone" defaultValue="138****1234" />
                </div>

                <Separator />

                <div className="space-y-2">
                  <Label htmlFor="current-password">当前密码</Label>
                  <div className="relative">
                    <Input id="current-password" type={showPassword ? "text" : "password"} defaultValue="********" />
                    <Button
                      variant="ghost"
                      size="icon"
                      className="absolute right-0 top-0"
                      onClick={() => setShowPassword(!showPassword)}
                    >
                      {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                      <span className="sr-only">{showPassword ? "隐藏密码" : "显示密码"}</span>
                    </Button>
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="new-password">新密码</Label>
                  <Input id="new-password" type={showPassword ? "text" : "password"} />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="confirm-password">确认新密码</Label>
                  <Input id="confirm-password" type={showPassword ? "text" : "password"} />
                </div>

                <Separator />

                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="two-factor" className="text-base">
                      两步验证
                    </Label>
                    <p className="text-sm text-muted-foreground">启用两步验证以提高账户安全性</p>
                  </div>
                  <Switch id="two-factor" />
                </div>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline">重置</Button>
              <Button className="gap-1">
                <Save className="h-4 w-4" />
                保存更改
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>

        <TabsContent value="notification" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>通知设置</CardTitle>
              <CardDescription>管理系统通知和提醒方式</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="attention-alert" className="text-base">
                      注意力警报
                    </Label>
                    <p className="text-sm text-muted-foreground">当班级整体注意力下降时发出警报</p>
                  </div>
                  <Switch id="attention-alert" defaultChecked />
                </div>

                <Separator />

                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="attendance-alert" className="text-base">
                      出勤提醒
                    </Label>
                    <p className="text-sm text-muted-foreground">当有学生缺勤时发出提醒</p>
                  </div>
                  <Switch id="attendance-alert" defaultChecked />
                </div>

                <Separator />

                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="progress-alert" className="text-base">
                      进度提醒
                    </Label>
                    <p className="text-sm text-muted-foreground">当课程进度落后于计划时发出提醒</p>
                  </div>
                  <Switch id="progress-alert" defaultChecked />
                </div>

                <Separator />

                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="system-alert" className="text-base">
                      系统通知
                    </Label>
                    <p className="text-sm text-muted-foreground">接收系统更新和维护通知</p>
                  </div>
                  <Switch id="system-alert" defaultChecked />
                </div>

                <Separator />

                <div className="space-y-2">
                  <Label className="text-base">通知方式</Label>
                  <p className="text-sm text-muted-foreground">选择接收通知的方式</p>
                  <div className="pt-2">
                    <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                        <Checkbox id="notify-system" defaultChecked />
                        <Label htmlFor="notify-system">系统内通知</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="notify-email" defaultChecked />
                        <Label htmlFor="notify-email">电子邮件</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="notify-sms" />
                        <Label htmlFor="notify-sms">短信</Label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button className="gap-1">
                <Save className="h-4 w-4" />
                保存设置
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>

        <TabsContent value="appearance" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>外观设置</CardTitle>
              <CardDescription>自定义系统界面和显示偏好</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label className="text-base">主题模式</Label>
                  <p className="text-sm text-muted-foreground">选择系统显示主题</p>
                  <div className="pt-2">
                    <RadioGroup defaultValue={theme} onValueChange={setTheme} className="flex gap-4">
                      <div className="flex flex-col items-center gap-2">
                        <Label
                          htmlFor="theme-light"
                          className="flex h-16 w-16 cursor-pointer items-center justify-center rounded-md border-2 border-muted bg-background"
                        >
                          <RadioGroupItem value="light" id="theme-light" className="sr-only" />
                          <Sun className="h-6 w-6" />
                        </Label>
                        <span className="text-xs">浅色</span>
                      </div>
                      <div className="flex flex-col items-center gap-2">
                        <Label
                          htmlFor="theme-dark"
                          className="flex h-16 w-16 cursor-pointer items-center justify-center rounded-md border-2 border-muted bg-slate-950"
                        >
                          <RadioGroupItem value="dark" id="theme-dark" className="sr-only" />
                          <Moon className="h-6 w-6 text-white" />
                        </Label>
                        <span className="text-xs">深色</span>
                      </div>
                      <div className="flex flex-col items-center gap-2">
                        <Label
                          htmlFor="theme-system"
                          className="flex h-16 w-16 cursor-pointer items-center justify-center rounded-md border-2 border-muted bg-background"
                        >
                          <RadioGroupItem value="system" id="theme-system" className="sr-only" />
                          <Laptop className="h-6 w-6" />
                        </Label>
                        <span className="text-xs">系统</span>
                      </div>
                    </RadioGroup>
                  </div>
                </div>

                <Separator />

                <div className="space-y-2">
                  <Label className="text-base">主题颜色</Label>
                  <p className="text-sm text-muted-foreground">选择系统主题颜色</p>
                  <div className="pt-2">
                    <RadioGroup defaultValue="blue" className="flex flex-wrap gap-4">
                      <div className="flex flex-col items-center gap-2">
                        <Label
                          htmlFor="color-blue"
                          className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-blue-500"
                        >
                          <RadioGroupItem value="blue" id="color-blue" className="sr-only" />
                        </Label>
                        <span className="text-xs">蓝色</span>
                      </div>
                      <div className="flex flex-col items-center gap-2">
                        <Label
                          htmlFor="color-green"
                          className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-green-500"
                        >
                          <RadioGroupItem value="green" id="color-green" className="sr-only" />
                        </Label>
                        <span className="text-xs">绿色</span>
                      </div>
                      <div className="flex flex-col items-center gap-2">
                        <Label
                          htmlFor="color-purple"
                          className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-purple-500"
                        >
                          <RadioGroupItem value="purple" id="color-purple" className="sr-only" />
                        </Label>
                        <span className="text-xs">紫色</span>
                      </div>
                      <div className="flex flex-col items-center gap-2">
                        <Label
                          htmlFor="color-orange"
                          className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-orange-500"
                        >
                          <RadioGroupItem value="orange" id="color-orange" className="sr-only" />
                        </Label>
                        <span className="text-xs">橙色</span>
                      </div>
                    </RadioGroup>
                  </div>
                </div>

                <Separator />

                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="compact-mode" className="text-base">
                      紧凑模式
                    </Label>
                    <p className="text-sm text-muted-foreground">减小界面元素间距，显示更多内容</p>
                  </div>
                  <Switch id="compact-mode" />
                </div>

                <Separator />

                <div className="space-y-2">
                  <Label className="text-base">字体大小</Label>
                  <p className="text-sm text-muted-foreground">调整系统字体大小</p>
                  <div className="pt-2">
                    <Slider defaultValue={[16]} min={12} max={20} step={1} />
                    <div className="mt-1 flex justify-between text-xs text-muted-foreground">
                      <span>小</span>
                      <span>中</span>
                      <span>大</span>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button className="gap-1">
                <Save className="h-4 w-4" />
                保存设置
              </Button>
            </CardFooter>
          </Card>
        </TabsContent>

        <TabsContent value="about" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>关于系统</CardTitle>
              <CardDescription>系统信息和帮助资源</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <div className="rounded-lg border p-4">
                  <h3 className="mb-2 text-lg font-medium">大学课堂实时监测系统</h3>
                  <p className="text-sm text-muted-foreground">版本: 1.0.0</p>
                  <p className="text-sm text-muted-foreground">发布日期: 2023-12-15</p>
                  <p className="text-sm text-muted-foreground">许可证: 高等教育版</p>
                </div>

                <div className="space-y-2">
                  <h3 className="text-lg font-medium">系统功能</h3>
                  <ul className="list-inside list-disc space-y-1 text-sm text-muted-foreground">
                    <li>实时监测学生注意力和参与度</li>
                    <li>课堂数据分析和可视化</li>
                    <li>学生学习表现跟踪</li>
                    <li>课程进度管理</li>
                    <li>教学资源管理</li>
                    <li>历史数据查询和分析</li>
                  </ul>
                </div>

                <div className="space-y-2">
                  <h3 className="text-lg font-medium">联系我们</h3>
                  <p className="text-sm text-muted-foreground">技术支持: support@edutech.com</p>
                  <p className="text-sm text-muted-foreground">电话: 400-123-4567</p>
                  <p className="text-sm text-muted-foreground">工作时间: 周一至周五 9:00-18:00</p>
                </div>

                <div className="flex gap-4">
                  <Button variant="outline" className="gap-1">
                    <HelpCircle className="h-4 w-4" />
                    帮助中心
                  </Button>
                  <Button variant="outline" className="gap-1">
                    <Info className="h-4 w-4" />
                    系统文档
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
